<template>
  <view class="device-card card" @click="handleClick">
    <view class="device-header">
      <text class="device-name">{{ device.name }}</text>
      <view class="device-status" :class="device.status === '在线' ? 'online' : 'offline'">
        {{ device.status }}
      </view>
    </view>
    
    <view class="device-body">
      <view class="battery-level">
        <text>电量: {{ device.battery }}%</text>
        <progress 
          :percent="device.battery" 
          stroke-width="8" 
          activeColor="#1296db" 
          backgroundColor="#eee"
        />
      </view>
      
      <view class="device-lock-status">
        <text :class="device.isLocked ? 'locked' : 'unlocked'">
          {{ device.isLocked ? '已锁定' : '未锁定' }}
        </text>
      </view>
    </view>
    
    <view class="device-footer">
      <text class="last-active">最后活动: {{ device.lastActive }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  
  emits: ['device-click'],
  
  setup(props, { emit }) {
    const handleClick = () => {
      emit('device-click', props.device)
    }
    
    return {
      handleClick
    }
  }
}
</script>

<style scoped>
.device-card {
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.device-name {
  font-size: 32rpx;
  font-weight: bold;
}

.device-status.online {
  color: #1afa29;
  font-size: 24rpx;
}

.device-status.offline {
  color: #ff5a5a;
  font-size: 24rpx;
}

.device-body {
  margin-bottom: 20rpx;
}

.battery-level {
  margin-bottom: 15rpx;
}

.battery-level progress {
  margin-top: 10rpx;
}

.device-lock-status .locked {
  color: #1296db;
  font-weight: bold;
}

.device-lock-status .unlocked {
  color: #ff5a5a;
  font-weight: bold;
}

.device-footer {
  border-top: 1rpx solid #eee;
  padding-top: 15rpx;
}

.last-active {
  color: #999;
  font-size: 24rpx;
}
</style>
